<template>
  <div class="innerBox">
    <div class="box">
      <div class="tableItem" v-for="(item,tabelIndexd) in tableList">
        <div class="title">{{ item.user }}</div>
        <!-- <div> -->
        <!-- 每个日期 -->
        <div v-if="queryParams.type==1" v-for="label in item.data">
          <div class="item" v-for="innerLaber in label.data">
            <div
              style="font-size: 16px; font-weight: bold; margin-bottom: 20px"
            >
              {{ setTime(innerLaber.date) }}
            </div>
            <table>
              <thead>
                <!-- 表头 -->
                <tr>
                  <th style="width: 150px">错题</th>
                  <th>思路预判与条件翻译</th>
                  <th>正误</th>
                  <th>题型辨识</th>
                  <th>正误</th>
                  <th>代数计算化简/几何转化处理</th>
                  <th>正误</th>
                </tr>
              </thead>
              <!-- 表头 -->
              <template v-for="trData in innerLaber.question">
                <tr
                  class="trDataStyle"
                  v-for="(labelText, index) in getLong(trData)"
                >
                  <td
                    v-if="index == 0"
                    :rowspan="getLong(trData).length"
                    style="text-align: center"
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="trData.pictureAddress"
                      fit="contain"
                      :preview-src-list="[trData.pictureAddress]"
                    >
                    </el-image>
                  </td>
                  <!-- <td v-else></td> -->
                  <td class="labelValue">
                    {{
                      trData.conditionMap.label[index] &&
                      trData.conditionMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.conditionMap.label[index] &&
                        trData.conditionMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        v-if="
                          trData.conditionMap.label[index] &&
                          trData.conditionMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i v-else class="el-icon-close"></i>
                    </span>
                  </td>
                  <td class="labelValue">
                    {{
                      trData.questionTypesMap.label[index] &&
                      trData.questionTypesMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.questionTypesMap.label[index] &&
                        trData.questionTypesMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        v-if="
                          trData.questionTypesMap.label[index] &&
                          trData.questionTypesMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i v-else class="el-icon-close"></i>
                    </span>
                  </td>
                  <td class="labelValue">
                    {{
                      trData.calculateMap.label[index] &&
                      trData.calculateMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.calculateMap.label[index] &&
                        trData.calculateMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        style="color: green"
                        v-if="
                          trData.calculateMap.label[index] &&
                          trData.calculateMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i style="color: red" v-else class="el-icon-close"></i>
                    </span>
                  </td>
                </tr>
              </template>
            </table>
            <!-- 标签正确率 -->
            <table style="margin-top: 20px">
              <thead style="line-height: 40px">
                <th>标签名</th>
                <th>出现次数</th>
                <th>正确率</th>
                <th>错误率</th>
              </thead>
              <tbody>
                <tr
                  v-for="bottomLabel in innerLaber.information"
                  style="line-height: 40px"
                >
                  <td style="padding-left: 10px">{{ bottomLabel.key }}</td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.sum }}
                  </td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.exactNumber }}
                  </td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.errorNumber }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 每个日期 -->

        <!-- 每个周期 -->
        <div v-if="queryParams.type==2" v-for="(labelOrder,labelIndex) in item.data" >
          <div class="item">
            <div>第{{ labelOrder.order }}周期</div>
            <table>
              <thead>
                <!-- 表头 -->
                <tr>
                  <th style="width: 150px">错题</th>
                  <th>思路预判与条件翻译</th>
                  <th>正误</th>
                  <th>题型辨识</th>
                  <th>正误</th>
                  <th>代数计算化简/几何转化处理</th>
                  <th>正误</th>
                </tr>
              </thead>
              <!-- 表头 -->
              <template v-for="trData in labelOrder.question">
                <tr
                  class="trDataStyle"
                  v-for="(labelText, index) in getLong(trData)"
                >
                  <td
                    v-if="index == 0"
                    :rowspan="getLong(trData).length"
                    style="text-align: center"
                  >
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="trData.pictureAddress"
                      fit="contain"
                      :preview-src-list="[trData.pictureAddress]"
                    >
                    </el-image>
                  </td>
                  <td class="labelValue">
                    {{
                      trData.conditionMap.label[index] &&
                      trData.conditionMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.conditionMap.label[index] &&
                        trData.conditionMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        v-if="
                          trData.conditionMap.label[index] &&
                          trData.conditionMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i v-else class="el-icon-close"></i>
                    </span>
                  </td>
                  <td class="labelValue">
                    {{
                      trData.questionTypesMap.label[index] &&
                      trData.questionTypesMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.questionTypesMap.label[index] &&
                        trData.questionTypesMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        v-if="
                          trData.questionTypesMap.label[index] &&
                          trData.questionTypesMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i v-else class="el-icon-close"></i>
                    </span>
                  </td>
                  <td class="labelValue">
                    {{
                      trData.calculateMap.label[index] &&
                      trData.calculateMap.label[index].name
                    }}
                  </td>
                  <td class="labelKey">
                    <span
                      v-if="
                        trData.calculateMap.label[index] &&
                        trData.calculateMap.label[index].isNo
                      "
                    >
                      <i
                        class="el-icon-check"
                        style="color: green"
                        v-if="
                          trData.calculateMap.label[index] &&
                          trData.calculateMap.label[index].isNo == 'yes'
                        "
                      ></i>
                      <i style="color: red" v-else class="el-icon-close"></i>
                    </span>
                  </td>
                </tr>
              </template>
            </table>
            <!-- 标签正确率 -->
            <table style="margin-top: 20px; min-width: 945px">
              <thead style="line-height: 40px">
                <th>标签名</th>
                <th>出现次数</th>
                <th>正确率</th>
                <th>错误率</th>
              </thead>
              <tbody>
                <tr
                  v-for="bottomLabel in labelOrder.information"
                  style="line-height: 40px"
                >
                  <td style="padding-left: 10px">{{ bottomLabel.key }}</td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.sum }}
                  </td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.exactNumber }}
                  </td>
                  <td style="width: 80px; text-align: center">
                    {{ bottomLabel.errorNumber }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 每个周期 -->
        <!-- <echartPc
          :item="item"
          :type="queryParams.type"
          :num="queryParams.frequency"
        ></echartPc> -->
      </div>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="setQeryParams"
      width="500px"
      class="dialogAddTree1"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div class="elDialogParams">
        <el-form
          :model="queryParams"
          label-width="120px"
          @submit.native.prevent="() => getTableList()"
        >
          <el-form-item label="查询方式" required>
            <el-radio v-model="queryParams.type" label="1">按天数查询</el-radio>
            <el-radio v-model="queryParams.type" label="2">按次数查询</el-radio>
          </el-form-item>
          <el-form-item label="选择学生" v-if="identity">
            <el-select
              v-model="queryParams.userId"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in userList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="查询周期(时间)" v-if="queryParams.type == 1">
            <el-input
              style="width: 130px"
              type="number"
              :disabled="queryParams.type == null"
              placeholder="请输入"
              v-model="queryParams.period"
              @keydown.enter.prevent="getTableList"
            >
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
          <el-form-item label="查询周期(次)" v-if="queryParams.type == 2">
            <el-input
              style="width: 130px"
              :disabled="queryParams.type == null"
              type="number"
              placeholder="请输入"
              v-model="queryParams.frequency"
              @keydown.enter="getTableList"
            >
              <template slot="append">次</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="getTableList">开始查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getPersonalReportsList } from "@/api/studentEnd/analysisOfTheStudents";
import { listUser } from "@/api/system/user";
import { mapGetters } from "vuex";
import echartPc from "../components/echartPc.vue";
import test from "./test.js";
export default {
  components: {
    echartPc,
  },
  data() {
    return {
      tableList: [],
      queryParams: {
        type: null,
        userId: null,
        frequency: null,
        period: null,
      },
      setQeryParams: true,
      userList: [],
      keyIsZk: {},
    };
  },
  computed: {
    ...mapGetters(["screenSize", "permissions", "rolesId", "userId"]),
    identity: function () {
      return !this.rolesId.includes(102);
    },
  },
  mounted() {
    // this.tableList = test.data.data;

    if (this.identity) {
      this.getUserList();
    } else {
    }
  },
  methods: {
    changeIsZk(inner) {
      console.log(inner, "5445", this.keyIsZk[inner]);
      this.keyIsZk[inner] = true;
      this.$set(this.keyIsZk, inner, true);
    },
    getTableList() {






      if (this.queryParams.type == 1) {
        if (this.queryParams.frequency) {
          delete this.queryParams.frequency;
        }
        if (!this.queryParams.period) {
          this.$message.warning('查询周期不能为空')
          return;
        }
      }
      if (this.queryParams.type == 2) {
        if (this.queryParams.period) {
          delete this.queryParams.period;
        }
        if (!this.queryParams.frequency) {
          this.$message.warning('查询周期不能为空')
          return;
        }
      }
      if(!this.queryParams.type){
        this.$message.error("请选择查询方式");
        return
      }
      if (!this.identity) {
        this.queryParams.userId = null;
      }else{
        // if(!this.queryParams.userId){
        //   this.$message.error("请选择学生");
        //   return
        // }
      }

      let loadingInstance = this.Loading.service();
      getPersonalReportsList(this.queryParams).then((res) => {
        if (res.code == 200) {
          this.tableList = res.data.data;
          this.setQeryParams = false;
          loadingInstance.close();
        }
      });
    },
  async  getUserList() {
      let obj = {
        pageSize: 999,
        pageNum: 1,
      };
    await  listUser(obj).then((res) => {
        if (res.code == 200) {
          this.userList = res.rows;
        }
      });
    },
    setClass(val) {
      const groupedData = val.reduce((groups, item) => {
        if (!groups[item.key.split("/")[0]]) {
          groups[item.key.split("/")[0]] = [];
        }
        groups[item.key.split("/")[0]].push(item);
        return groups;
      }, {});
      function deleteKey(test) {
        let arr = JSON.parse(JSON.stringify(test));
        arr.forEach((ele) => {
          let itemArr = ele.key.split("/");
          itemArr.splice(0, 1);
          ele.key = itemArr.join("/");
        });
        return arr;
      }

      let arr = [];
      let key = Object.keys(groupedData);
      key.forEach((ele, index) => {
        let abc = this.generateRandomSixDigitNumber();
        let obj = {
          key: key[index],
          info: deleteKey(groupedData[ele]),
          isClass: abc,
        };
        console.log(abc, "abc");
        // this.$set(this.keyIsZk,abc,false)
        this.keyIsZk[abc] = false;
        console.log(ele, "ele", groupedData[ele]);
        arr.push(obj);
      });
      console.log(arr, "index");

      return arr;
    },
    //调整时间显示
    setTime(time) {
      // 确保传入的参数是 Date 对象
      if (!(time instanceof Date)) {
        time = new Date(time);
      }

      // 获取年、月、日、时、分、秒
      let year = time.getFullYear();
      let month = time.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
      let day = time.getDate();
      let hours = time.getHours();
      let minutes = time.getMinutes();
      let seconds = time.getSeconds();

      // 格式化月份、日期、小时、分钟和秒，确保它们都是两位数
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hours = hours < 10 ? "0" + hours : hours;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      // 组合成所需的格式
      let formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },

    //生成随机数
    generateRandomSixDigitNumber() {
      if (crypto && crypto.getRandomValues) {
        // 创建一个Uint32Array数组，用于存储生成的随机数
        const array = new Uint32Array(1);
        // 使用crypto.getRandomValues填充数组
        crypto.getRandomValues(array);
        // 将生成的随机数转换为介于0和1之间的浮点数
        const random = array[0] / (0xffffffff + 1);
        // 将浮点数乘以1000000（因为我们需要一个6位数），然后取整
        const sixDigitNumber = Math.floor(random * 1000000);
        return sixDigitNumber.toString().padStart(6, "0"); // 确保数字总是6位，前面用0填充
      } else {
        // 如果crypto不可用，则使用Math.random作为回退方案
        return Math.floor(Math.random() * 900000 + 100000)
          .toString()
          .padStart(6, "0");
      }
    },
    //获取每个题的最大标签数
    getLong(item) {
      //思路预判条件翻译
      let conditionMap = item.conditionMap && item.conditionMap.label.length;
      //题型辨识
      let questionTypesMap =
        item.questionTypesMap && item.questionTypesMap.label.length;
      //代数计算化简/几何转化处理
      let calculateMap = item.calculateMap && item.calculateMap.label.length;
      if (conditionMap > questionTypesMap && conditionMap > calculateMap) {
        return new Array(conditionMap).fill(null);
      } else if (
        questionTypesMap > conditionMap &&
        questionTypesMap > calculateMap
      ) {
        return new Array(questionTypesMap).fill(null);
      } else {
        return new Array(calculateMap).fill(null);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.innerBox {
  height: 100%;
  display: flex;

  background-color: #f1f3f8;

  .box {
    flex: 1;
    overflow: auto;

    .tableItem {
      min-height: 150px;
      background-color: white;

      border-radius: 10px;
      margin-bottom: 15px;
      padding: 10px;

      > .title {
        font-size: 20px;
        margin: 0px auto 30px auto;
        text-align: center;
        color: #707070;
      }

      .item {
        // background-color: red;
        margin-bottom: 20px;
        table {
          border-collapse: collapse;
          width: 100%;
          thead {
            th {
              font-size: 12px;
              border: #707070 1px solid;
            }
          }
          tr {
            border: #707070 1px solid;
          }
          td {
            border-right: #707070 1px solid;
          }
          .trDataStyle {
            td {
              text-align: left;
            }
            .labelKey {
              min-width: 80px;
              text-align: center;
            }
            .labelValue {
              width: 30%;
              min-width: 200px;
            }
          }
        }
      }
    }
  }
}

.elDialogParams {
  //   height: 500px;
  //   width: 200px;
  min-height: max-content;
  background-color: white;
}

/* 隐藏Element UI输入框类型为number时的上下箭头 */
::v-deep .el-input__inner[type="number"]::-webkit-inner-spin-button,
.el-input__inner[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

::v-deep .el-icon-check {
  color: green;
  font-size: 20px;
}
::v-deep .el-icon-close {
  color: red;
  font-size: 20px;
}
</style>
